<template>
  <page-header-wrapper :title="false">
    <el-card class="box-card">
      <div slot="header" class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <!-- <a-col :span="6">
              <a-form-item label="群名称">
                <a-input v-model="queryParam.groupName" placeholder="请输入: 群名称" />
              </a-form-item>
            </a-col> -->

            <a-col :span="12">
              <!-- <a-button style="margin-right: 8px" type="primary" @click="query">查询</a-button>
              <a-button style="margin-right: 8px" @click="reset">重置</a-button> -->
              <a-button icon="plus" style="margin-right: 8px" type="primary" @click="handleAdd">新建</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="群名称" prop="groupName" align="center" />
        <el-table-column label="微信号" prop="wxNo" align="center" />
        <el-table-column label="群二维码" align="center" >
          <template slot-scope="scope">
            <img :src="scope.row.groupUrl" height="75" style="min-width: 150px;" preview="1"/>
          </template>
        </el-table-column>
        <el-table-column label="群码到期时间" prop="invalidDate" align="center" />
        <el-table-column label="排序号" prop="sortOrder" align="center" />
        <el-table-column label="创建时间" prop="createTime" align="center" />
        <el-table-column label="更新时间" prop="updateTime" align="center" />
        <el-table-column width="150" fixed="right" align="center" label="操作">
          <template slot-scope="scope">
            <el-link :underline="false" type="primary" @click="handleEdit(scope.row)">编辑</el-link>
          </template>
        </el-table-column>
      </el-table>

      <div style="display: flex;justify-content: flex-end;margin: 20px 0 0;">
        <el-pagination :current-page="queryParam.page" :page-size="queryParam.limit" :page-sizes="[10, 20, 50, 100]"
          :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-card>

    <a-modal :title="modal.title" :visible="modal.visible" maskClosable width="600px" @cancel="modal.visible = false"
      @ok="handleOk">
      <a-form :form="modal.form" :label-col="{ span: 3 }" :wrapper-col="{ span: 16 }">

        <a-form-item label="群名称">
          <a-input v-model="modal.form.groupName" placeholder="请输入:群名称" />
        </a-form-item>
        <a-form-item label="微信号">
          <a-input v-model="modal.form.wxNo" placeholder="请输入:微信号" />
        </a-form-item>
        <a-form-item label="群二维码">
          <!-- <a-input v-model="modal.form.groupUrl" placeholder="请输入:群二维码" /> -->
					<a-upload action="#" :show-upload-list="false" name="file" accept="image/png, image/jpeg"
						class="avatar-uploader" list-type="picture-card" :customRequest="handleUploadCover">
						<img v-if="coverFileList && coverFileList[0]" :src="coverFileList[0].response.data.src" alt="avatar"
							height="150" width="150" />
						<div v-else>
							<a-icon type="plus" />
							<div class="ant-upload-text">
								上传
							</div>
						</div>
					</a-upload>
        </a-form-item>
        <a-form-item label="群码到期时间">
          <!-- <a-input v-model="modal.form.invalidDate" placeholder="请输入:群码到期时间" /> -->
          <a-date-picker
            valueFormat="YYYY-MM-DD"
            v-model="modal.form.invalidDate" />
        </a-form-item>

        <a-form-item label="排序号">
          <a-input-number :min="1" :precision="0" v-model="modal.form.sortOrder" placeholder="排序号"
            :style="{ width: '100%', textAlign: 'center', display: 'inline-block' }" />
        </a-form-item>

      </a-form>
    </a-modal>

    <!-- 标签 -->
    <a-modal :title="modal.title" :visible="modal.visible1" destroyOnClose maskClosable width="1000px"
      @cancel="modal.visible1 = false" @ok="modal.visible1 = false">
      <survey-category-label :id="modal.currentId"></survey-category-label>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
  import {
    addGroup,
    listByPageGroup,
    updateGroup
  } from '@/api/group'
  import api from '@/api/banner'	
  import {
		getUploadForOSS,
		POST
	} from '@/api/banner'

	import {
		Loading
	} from 'element-ui';
  
  const baseApi = process.env.VUE_APP_API_BASE_URL

  export default {
    // components: {
    //   SurveyCategoryLabel
    // },
    name: 'Index',
    data() {
      return {
				coverFileList: [],
        uploadApi: baseApi + api.upload,
        stateList: [
          { value: 1, label: '激活' },
          { value: 2, label: '冻结' }
        ],
        queryParam: {
          page: 1,
          limit: 20
        },
        total: 0,
        modal: {
          visible: false,
          visible1: false,
          currentId: '',
          title: '',
          form: {}
        },
        tableData: []
      }
    },
    mounted() {
      this.getTable()
    },
    methods: {
      handleAvatarSuccess (e) {
        this.modal.form.groupUrl = e.data.src
      },
      query() {
        this.queryParam.page = 1
        this.getTable()
      },
      reset() {
        this.queryParam = {
          page: 1,
          limit: 20
        }
        this.getTable()
      },
      handleSizeChange(val) {
        this.queryParam.limit = val
        this.getTable()
      },
      handleCurrentChange(val) {
        this.queryParam.page = val
        this.getTable()
      },
      getTable() {
        listByPageGroup(this.queryParam).then(res => {
          this.tableData = res.data.records
          this.total = parseInt(res.data.total)
        }).catch(() => {})
      },
      handleOk() {
        if (this.modal.form.id) {
          updateGroup({ ...this.modal.form }).then(res => {
            this.$message.success(res.msg)
            this.modal.form = {}
            this.modal.visible = false
            this.queryParam.page = 1
            this.getTable()
          }).catch(() => {})
        } else {
          this.modal.form.state = 1
          addGroup({ ...this.modal.form }).then(res => {
            this.$message.success(res.msg)
            this.modal.form = {}
            this.modal.visible = false
            this.queryParam.page = 1
            this.getTable()
          }).catch(() => {})
        }
      },
      handleAdd() {
        this.modal.form = {
          groupName: '',
          wxNo: '',
          groupUrl: '',
          invalidDate: '',
          sortOrder: '1',
          id: ''
        }
				this.coverFileList = null
        this.modal.visible = true
        this.modal.title = '新增'
      },
      handleEdit(record) {
        const data = JSON.parse(JSON.stringify(record))
        this.modal.form = {
          groupName: data.groupName,
          wxNo: data.wxNo,
          groupUrl: data.groupUrl,
          invalidDate: data.invalidDate,
          sortOrder: data.sortOrder,
          id: data.id
        }
				this.coverFileList = [ {
					response: {
						data: {
							src: data.groupUrl
						}
					}
				} ]
        this.modal.visible = true
        this.modal.title = '编辑'
      },

			// 群二维码，2024年11月5日23:54:28
			handleUploadCover( e ) {
				const loadingInstance = Loading.service( {
					background: 'rgba(0, 0, 0,0)'
				} )
				getUploadForOSS( {
					fileName: e.file.name
				} ).then( res => {
					if ( res.data ) {
						let data = res.data;
						const formData = new FormData();
						formData.append( "name", e.name );
						formData.append( "policy", data.policy );
						formData.append( "OSSAccessKeyId", data.ossAccessKeyId );
						formData.append( "success_action_status", "200" );
						formData.append( "signature", data.signature );
						formData.append( "key", data.fileKey );
						formData.append( "file", e.file );
						this.fileToossCover( data.host, formData, res.data.saveFileUrl )
					}
				} ).catch( () => {
					loadingInstance.close()
				} )
			},
			fileToossCover( url, formData, resultUrl ) {
				const loadingInstance = Loading.service( {
					background: 'rgba(0, 0, 0,0)'
				} )
				POST( url, formData )
					.then( ( res ) => {
						loadingInstance.close()
						if ( res.status == '200' ) {
							this.modal.form.groupUrl = resultUrl
							this.coverFileList = [ {
								response: {
									data: {
										src: resultUrl
									}
								}
							} ]
						}
					} )
					.catch( () => {
						loadingInstance.close()
					} )
			},
      
      handleLabel(row) {
        this.modal.currentId = row.id
        this.modal.visible1 = true
        this.modal.title = '编辑标签'
      }
    }
  }
</script>

<style lang="less" scoped>
  .view-video {
    position: relative;

    .close {
      position: absolute;
      right: 15px;
      top: 0;
      cursor: pointer;
    }
  }

  /deep/.ant-modal-body {
    max-height: calc(80vh - 150px);
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 6px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }

    &::-webkit-scrollbar-thumb {
      // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #e3e3e6;
      border-radius: 6px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
      // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
    }
  }
  
  
.avatar-uploader ::v-deep .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

</style>